<template>
  <div class="mail-item">
    <div class="content-detail">
      <div class="status">
        <a-checkbox
          :class="data.isLooked ? 'looked' : ''"
          v-model:checked="data.checked"
        ></a-checkbox>
        <i class="iconfont icon-envelope" :class="data.isLooked ? 'looked' : ''"></i>
        <span v-if="!data.isLooked" class="status-till"></span>
        <span class="status-text" :class="data.isLooked ? 'looked' : ''">{{
          data.title
        }}</span>
        <!-- <div class="status-trans" v-if="data.checked">转发</div> -->
      </div>
      <span class="msg-content" :class="data.isLooked ? 'looked' : ''">{{
        data.content
      }}</span>
      <a
        v-if="haveDetail"
        class="look-detail"
        :style="{ color: isDisable ? '#00000040' : '' }"
        @click.stop="lookDetail(data)"
        >查看详情</a
      >
    </div>
    <div class="time-delete">
      <span class="time">{{ data.createTime }}</span>
      <a-popconfirm
        :disabled="!btnPerm.includes('deleteAble')"
        placement="topRight"
        @confirm="deleteItem(data.id)"
      >
        <template #title>
          <p style="width: 197px">是否删除此信息，删除后不可恢复</p>
        </template>
        <a class="delete" :class="{ disable: !btnPerm.includes('deleteAble') }">删除</a>
      </a-popconfirm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { dataSourceType } from "@/type.d";
import { ref, reactive, onMounted, watch } from "vue";
import { routerPerm } from "@/utils/common";

const btnPerm = ref<any[]>([]);
const emit = defineEmits(["lookDetail", "deleteItem"]);
const props: any = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const data = ref(props.data);
const haveDetail = ref<boolean>(true);
const isDisable = ref<boolean>(false);

if (
  data.value.msgType === 5 ||
  data.value.msgType === 8 ||
  data.value.msgType === 9 ||
  data.value.msgType === 10
) {
  haveDetail.value = false;
}

if (data.value.msgType === 2) {
  isDisable.value = true;
}
// watch
watch(() => props.data, (newVal: any, oldVal: any) => {
  data.value = newVal
})
//method

//查看详情
const lookDetail = (data: dataSourceType) => {
  if (isDisable.value) {
    return;
  }
  emit("lookDetail", data);
};

//单个删除
const deleteItem = (id: number) => {
  emit("deleteItem", [id]);
};

// onMounted
onMounted(() => {
  btnPerm.value = routerPerm();
});
</script>

<style lang="less" scoped>
.mail-item {
  position: relative;
  padding: 24px;
  height: 132px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;

  .looked {
    opacity: 0.15;
  }

  &::after {
    position: absolute;
    bottom: 0;
    content: "";
    height: 1px;
    width: calc(100% - 48px);
    background-color: rgba(0, 0, 0, 0.06);
  }

  &:hover {
    margin: 0 2px;
    box-shadow: 0px 5px 12px 4px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.12),
      0px 1px 2px -2px rgba(0, 0, 0, 0.16);
  }

  .content-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .status {
      display: flex;
      flex-direction: row;
      align-items: center;

      .icon-envelope {
        margin-left: 8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #1f6ded;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .icon-envelope::before {
        height: 24px;
      }

      &-till {
        margin-left: 8px;
        width: 6px;
        height: 6px;
        background: #ff4d4f;
        border-radius: 50%;
      }

      &-text {
        margin-left: 4px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 14px;
      }

      &-trans {
        margin-left: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 22px;
        background: #fff7e6;
        border-radius: 2px;
        border: 1px solid #ffd591;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #d46b08;
        line-height: 12px;
      }
    }

    .msg-content {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
    }

    .look-detail {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f6ded;
      line-height: 14px;
    }
  }

  .time-delete {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;

    .time {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 14px;
    }

    .delete {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f6ded;
      line-height: 14px;
    }
  }
}
</style>
